前兩天有提到自定義模板的部分

筆者目前知道的方式主要有 3 種方式

1. 定義 tagName

   這個不能算是使用模板，但這裡也可以想像成沒有定義模板，

   odoo js 會依照 tagName 定義的來產生 Dom 物件，帶各位看一下原始碼

   // addons/web/static/src/js/core/widget.js
   var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin, {
       // Backbone-ish API
       tagName: 'div',
       id: null,
       className: null,
       attributes: {},
   
   		// ...
   });
   

   很明顯看到預設為 div ，

   所以假設新增了一個 widget，沒有改 TagName 的情況，預設就是 div

   接著看一下前幾天繼承的 FieldText

   // addons/web/static/src/js/fields/basic_fields.js
   var FieldText = InputField.extend(TranslatableFieldMixin, {
       description: _lt("Multiline Text"),
       className: 'o_field_text',
       supportedFieldTypes: ['text', 'html'],
       tagName: 'span',
   
   		// ...
   });
   

   繼承後改成 span ，所以把 $el 用 console.log 印出後就會指向是 span 的 dom 物件

   而 id , className , attributes 就是各位常見的 dom 物件屬性

2. 定義 template

   前天在 __manifest__.py 定義的 qweb 的 list

   是預設網頁載入時，會整包在第一時間丟到前端

   而 template 就是從這包去取得對應的模板

   像是 widget binary 就有使用模板

   // addons/web/static/src/js/fields/basic_fields.js
   var FieldBinaryFile = AbstractFieldBinary.extend({
       description: _lt("File"),
       template: 'FieldBinaryFile',
   		// ...
   });
   

3. 繼承 _render , _renderReadOnly , _renderEdit 來自行套用模板

   這樣做有個優點，依照當前值的狀態來決定要使用什麼模板

   也能把模板拆得更乾淨

   缺點是比較麻煩，像是大家看到的 tree view，就是用這三個階段來完成畫面

   這就是為什麼資料量大的時候，畫面會卡一下